<template>
  <sky-base-page padding="0" bgPageColor="#f3f8f5">
    <view class="form-card">
      <uni-forms class="bang-form" ref="formRef" :model="form"
                 label-position="top" label-width="400rpx" err-show-type="toast">
        <uni-forms-item name="headimg" label="头像">
          <qly-upload-multiple v-model="form.headimg" :limit="1"/>
        </uni-forms-item>
        <uni-forms-item name="nickname" label="昵称">
          <view class="input-box">
            <input type="text" v-model="form.nickname" placeholder="请输入昵称"/>
          </view>
        </uni-forms-item>
        <uni-forms-item name="lifePhotos" label="手机号">
          <view class="input-box gray-text">
            {{ userInfo.phone }}
          </view>
        </uni-forms-item>
        <uni-forms-item name="specialty" label="特长">
          <up-textarea
              type="textarea"
              placeholder="请输入特长"
              v-model="form.specialty"
              maxlength="20"
          ></up-textarea>
        </uni-forms-item>
        <uni-forms-item name="lifePhotos" label="我的图集">
          <qly-upload-multiple v-model="form.lifePhotos" :limit="9"/>

        </uni-forms-item>
        <uni-forms-item name="user_type" label="类型">
          <picker range-key="name" @change="userTypeChange" :value="userTypeIndex" :range="userTypeList">
            <view class="input-box">
              {{ userTypeText }}
            </view>
          </picker>
        </uni-forms-item>
        <uni-forms-item v-if="false" name="go_to_work" label="状态">
            <view class="input-box gray-text">
              {{ workText }}
            </view>
        </uni-forms-item>
        <uni-forms-item v-if="false" name="lifePhotos" label="地址">
          <view class="input-box gray-text">
            {{ userInfo.address }}
          </view>
        </uni-forms-item>
      </uni-forms>
    </view>
    <template #footer>
      <view class="login-btn" @click="qly.form.pass(submit,formRef)">
        保 存
      </view>
    </template>
  </sky-base-page>
</template>
<script setup>

const userTypeIndex = ref(0)
const userTypeList = ref([])
const formRef = ref()
const userInfo = ref({})
const userTypeText = ref('请选择')
const workText = ref('请选择')
const form = ref({
  headimg: [],
  nickname: '',
  specialty: '',
  lifePhotos: [],
  user_type: '',
  go_to_work: ''
})

const workList = ref([
  {
    id: 1,
    name: '上线'
  },
  {
    id: 2,
    name: '下线'
  },
])

// 登录
const getUserInfo = async () => {
  console.log('qly', qly)
  const res = await qly.api.user.getuser()
  if (res.code === 1) {
    userInfo.value = res.data
    console.log('userInfo',userInfo.value)
    const headList = res.data.headimg.split(',')
    const headimg = headList.map(item => {
      return {
        url: item,
      }
    })

    const lifePhotosList = res.data.headimg.split(',')
    const lifePhotos = lifePhotosList.map(item => {
      return {
        url: item,
      }
    })
    form.value = {
      headimg: headimg || [],
      nickname: res.data.nickname,
      specialty: res.data.specialty,
      lifePhotos: lifePhotos || [],
      user_type: res.data.user_type.id,
      go_to_work: res.data.go_to_work,
    }

    console.log('form.value', form.value)

    userTypeText.value = res.data.user_type.name
    workText.value = workList.value.find(item => item.id == res.data.go_to_work).name

  } else {
    qly.dialog.apiError(res).catch()
  }
}

// 用户类型修改
const userTypeChange = (e) => {
  userTypeText.value = userTypeList.value[e.detail.value].name
  form.value.user_type = userTypeList.value[e.detail.value].id
}

// 用户类型修改
const workChange = (e) => {
  workText.value = workList.value[e.detail.value].name
  form.value.go_to_work = workList.value[e.detail.value].id
}

// 获取用户类型
const getusertype = async () => {
  const res = await qly.api.user.getusertype()
  if (res.code === 1) {
    userTypeList.value = res.data
  } else {
    qly.dialog.apiError(res).catch()
  }

  getUserInfo() // 获取用户信息
}

const formNew = computed(() => {
  return {
    ...form.value,
    headimg: form.value.headimg.map(item => item.url).join(','),
    lifePhotos: form.value.lifePhotos.map(item => item.url).join(','),
  }
})
// 保存
const submit = async () => {
  console.log('formNew.value', formNew.value)
  const res = await qly.api.user.uptate_user(formNew.value)
  if (res.code === 1) {
    qly.dialog.success('修改成功')
    uni.navigateBack()
  } else {
    qly.dialog.apiError(res).catch()
  }
}


onLoad((options) => {
  getusertype() // 获取用户类型
})
</script>
<style lang="scss" scoped>
.header-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 400rpx;
  padding: 0 32rpx;
  box-sizing: border-box;

  .left-box {
    .hello {
      font-family: D-DIN-DIN, D-DIN-DIN;
      font-weight: bold;
      font-size: 80rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      color: #293845;
    }

    .desc {
      color: #293845;
      font-weight: bold;
      font-size: 34rpx;
    }
  }

  .logo-phone {
    width: 160rpx;
    height: 160rpx;
    border-radius: 12rpx;
  }
}

.form-card {
  width: 92%;
  margin: 20rpx auto;
  padding: 32rpx;
  box-sizing: border-box;
  border-radius: 18rpx;
  background-color: #fff;
}

.bang-form {
  flex: 1;
  overflow: auto;
}

.yuan-phone {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.login-btn {
  color: #fff;
  width: 90%;
  height: 96rpx;
  background: #00C76A;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 30rpx;
  margin: 0 auto;
}

.input-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48rpx 0 24rpx;
  width: 100%;
  height: 80rpx;
  background: #F5F5F5;
  border-radius: 16rpx;
  font-size: 32rpx;
  box-sizing: border-box;

  input {
    width: 100%;
  }

  .code-box {
    margin-right: 50rpx;
  }
}

.gray-text {
  color: #909399;
}
</style>
